<template>
	<view class="content">
		<view class="row">
			<view class="tit">{{type==1?'视频展示':'需求视频'}}:</view>
			<view class="imagebox">
				<video v-if='video' :src="video" class="video" controls></video>
				<!-- <view class="videolink">{{video}}</view> -->
			</view>
			<view class="code" @click="ChooseVideo">上传</view>
		</view>
		<view class="row">
			<view class="tit"style="width: 280rpx;">{{type==1?'专利/技术图片展示':'需求图片'}}:</view>
			<view class="imagebox">
				<view v-for="(item,index) in imgUrlarr" class="imageup">
					<image :src="item" :key='index'  mode=""></image>
					<text @click="remove(index)">+</text>
				</view>

			</view>
			<!-- <input class="input" type="view" v-model="picture" placeholder="最多可上传9张" placeholder-class="placeholder" /> -->
			<view class="code" @click="ChooseImage">上传</view>
		</view>
		<view class="row">
			<view class="tit">
				<text>*</text>
				{{type==1?'专利/技术名称':'需求名称'}}:
			</view>
			<input class="input" type="text" v-model="name" :placeholder="type==1?'请填写专利全称':'请填写需求全称'" placeholder-class="placeholder" />
		</view>
		<view class="row" v-if="type==1">
			<view class="tit">
				<text></text>
				专 利 号:
			</view>
			<input class="input" type="text" v-model="patentNumber" placeholder="发布专利请（必）填专利号，发布技术，此项可不填。" placeholder-class="placeholder" />
		</view>

		<view class="row" @click="selectArea">
			<view class="tit">
				<text>*</text>
				所属领域:
			</view>
			<input class="input" type="text" disabled="disabled" v-model="fieldTitle" placeholder="请选择所在领域" placeholder-class="placeholder" />
			<image src="../../static/icon/right_arrow.png" class="arrow"></image>
		</view>
		<view class="row">
			<view class="tit">
				<text>*</text>
				关 键 字:
			</view>
			<!-- 新增标签 -->
			<view class="taglist">
				<view class="newTagContent">
					<view class="newTagName">
						<input class="newTagInput" type="text" v-model="tagName"
						 placeholder="设置关键字标签" placeholder-style="font-size:14px;text-align:center;" />
					</view>
					<view class="newTagClick">
						<image src="../../static/icon/add@2x.png" class="addTag" @click="createTags" ></image>
						<!-- <button class="newTagClickBtn" type="primary" size="default" @tap="createTags">添加</button> -->
					</view>
				</view>
				<view class="tagItemSelectContent">
					<view class="tagItemSelect" :key="idx" v-for="(tagText,idx) in selectList">
						<view>
							<text :data-text="tagText">{{tagText}}</text>
						</view>
						<image class="select_delete" src="../../static/icon/icon_search_cancel@2x.png" 
						 :data-text="tagText"
						 @tap="removeLabel"></image>
					</view>
				</view>
			</view>
			<!-- <view class="">
				<view class="taglist"   v-for="(item, i) in FormArr" :key="i">
					<input class="input" :v-model="item" type="text"  value=""   :disabled="i==FormArr.length-1 ? false:true"
					 placeholder="设置专利关键字标签 " placeholder-class="placeholder" />
					 <image src="../../static/icon/add@2x.png" class="addTag" @click="addTag(item)" v-if="i==0"></image>
					<image @click="Delete(i)" src="../../static/icon/icon_search_cancel@2x.png" class="close" v-if="i>0"></image>
				</view>
				
			</view> -->
			<!-- <input class="input" type="text" v-model="keywords"   :placeholder="type==1?'设置专利关键字标签':'设置需求关键字标签'" placeholder-class="placeholder" />
			 <view class="flex-row"><uni-tag :text="items" v-for="(items, index) in tagList" :key="index"></uni-tag></view> 
			<image src="../../static/icon/add@2x.png" class="addTag" @click="addTag"></image> -->
		</view>

		

		<view class="row">
			<view class="tit">
				<text>*</text>
				{{type==1?'转让':'悬赏'}}价格:
			</view>
			<input class="input" type="text" v-model="price" :placeholder="type==1?'请填写专利转让价格':'请填写悬赏价格'" placeholder-class="placeholder" />
		</view>
		<view class="rows">
			<view class="tit">
				<text>*</text>
				{{text}}/技术说明:
			</view>
			<textarea maxlength="20000" name="" id="" v-model="introduction" :placeholder="'请填写所发布专利或技术的摘要说明'+text+'说明'"></textarea>
		</view>

		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import OSSUtil from '../../libs/ossUtil.js'
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	export default {
		components: {
			uniTag
		},
		name: 'byImgUpload',
		props: {
			authId: String,
			imgUrl: String,
			deleteFlag: Boolean,
			startShowAction: Function,
			startDelete: Function,
			imgActions: Array,
		},
		data() {
			return {
				progress: 0,
				imgUrlarr: [],
				imgarr: [],
				imgleng: 0,
				imgData: {
					visible: false,
					actions: this.imgActions
				},
				introduction: '',
				patentName: '',
				patentNumber: '',
				picture: '',
				transferPrice: '',
				keywords: '',
				video: '',
				fieldId: '',
				fieldParentId:'',
				field: {},
				fieldTitle: '',
				tagList: [],
				tagLists: [],
				FormArr: [{}],
				text: "专利",
				type: 1,
				name: '',
				price: '',
				detail:'',
				id:'',
				keylist:[],
				tagName:'',
				tagList:[],
				selectList:[],
				tag_del:false


			};
		},
		mounted() {},
		onShow() {
			this.time = this.yearTime()
		},
		onLoad(option) {
			console.log(option);
			this.type = option.type
			if (option.type == 1) {
				this.text = "专利"
				uni.setNavigationBarTitle({
					title: "发布专利"
				})
			} else {
				this.text = "悬赏"
				uni.setNavigationBarTitle({
					title: "发布悬赏"
				})
				if(option.id){
					this.id = option.id
					this.getdetail(option.id)
					uni.setNavigationBarTitle({
						title: "修改悬赏"
					})
					
				}
			}
		},
		watch: {
			field: function(val) {
				console.log(val);
				this.fieldTitle = val.name;
				this.fieldId = val.fieldId;
				this.fieldParentId = val.fieldParentId
			}
		},
		methods: {
			//根据id获取悬赏详情
			getdetail(id){
				this.$http.get('/demand/getDetailInfo',{demandId:id}).then(res => {
					if (res.code == '0') {
						console.log( res.data)
						this.detail = res.data
						this.fieldId =res.data.fieldId
						this.fieldTitle =res.data.fieldName
						this.introduction =res.data.introduce
						this.price =res.data.price
						this.video =res.data.video
						this.name =res.data.name
						this.keywords = res.data.keywords
						let img = res.data.picture.split(',')
						  for(var i in img){  
							   console.log(img[i]);        
					
							}
							this.imgUrlarr = img
						console.log(img)	
							
					}
				})
			},
			
			async ChooseImage() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息

				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称

				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						console.log(sign.host + '/' + fileName)
						let img = sign.host + '/' + fileName
						this.imgUrlarr = this.imgUrlarr.concat(img)

						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						that.$emit('imgUploaded', {
							data: sign.host + fileName,
							authId: this.authId
						});
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});

				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},

			yearTime(e) {
				var a = new Date();
				var y = a.getFullYear();
				var m = a.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				var d = a.getDate();
				d = d < 10 ? "0" + d : d;

				var h = a.getHours();
				h = h < 10 ? "0" + h : h;
				var mm = a.getMinutes();
				mm = mm < 10 ? "0" + mm : mm;
				var s = a.getSeconds();
				s = s < 10 ? "0" + s : s;

				if (e == 'year') {
					return y + '/' + m + '/' + d;
				}
				if (e == 'time') {
					return h + ':' + mm + ':' + s;
				}
				if (e == 'yearTime') {
					return y + '/' + m + '/' + d + '  ' + h + ':' + mm + ':' + s;
				}
				return h + ':' + mm;
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgUrlarr,
					current: e.currentTarget.dataset.url
				});
			},
			async ChooseVideo() {
				let imageSrc = await OSSUtil.getVideo();
				let sign = await OSSUtil.get_STS() // 获取签名等信息
				let fileName = OSSUtil.getFileName(imageSrc);
				// let imageSrc = files.tempFilePaths[0];
				// let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称

				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: '',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						console.log(sign.host + '/' + fileName)
						let img = sign.host + '/' + fileName

						// this.video=this.imgUrlarr
						this.video = sign.host + "/" + fileName

						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						that.$emit('imgUploaded', {
							data: sign.host + fileName,
							authId: this.authId
						});
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});

				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			//选择领域
			selectArea() {
				uni.navigateTo({
					url: '/pages/detail/arealist'
				});

			},
			addArray(e){
				 this.keylist = e.detail.value
				
			},
			remove(index) {
				this.imgUrlarr.splice(index, 1)
			},

			//添加关键字 行
			addTag() {
				this.FormArr.push({})
			},
			//删除标签行
			Delete(index) {
				this.FormArr.splice(index, 1);
				console.log(this.FormArr)
				
			},
			//新增标签
			createTags: function(){
				let newTag = this.tagName.trim();
				if(newTag==''){
					return false;
				}
				let index = this.selectList.indexOf(newTag);
				this.tagName = '';
				if(newTag !== '' && index==-1){
					this.tagList.push(newTag);
					this.selectList.push(newTag);
				}
			}, 
			
			//从已选择列表中移除
			removeLabel:function(e){
				console.log(1)
				let select_value=e.target.dataset.text;
				let index = this.selectList.indexOf(select_value);
				if (index > -1) {
					this.selectList.splice(index, 1);
				}
			},
			//标签库显示删除标识
			showDelLabel:function(e){
				this.tag_del=true;
			},
			
			
			async ChooseImage() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息

				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称

				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						console.log(sign.host + '/' + fileName)
						let img = sign.host + '/' + fileName

						this.imgUrlarr = this.imgUrlarr.concat(img)
						console.log(this.imgUrlarr)
						this.picture = this.imgUrlarr.join(',')
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						that.$emit('imgUploaded', {
							data: sign.host + fileName,
							authId: this.authId
						});
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});

				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			//提交 发布专利
			//获取轮播图
			getbanner() {
				var that = this;
				this.$http.get('/public/getBanner').then(res => {
					if (res.code == '0') {
						let arr = res.data;
						res.data.forEach(item=>{
							that.imgUrlarr = that.imgUrlarr.concat(item.coveImg)
						})
						// console.log(that.imgUrlarr)
					}
				})
				
			},
			confirm() {
				if(this.imgUrlarr.length==''){
					this.getbanner()
				}
			if(this.FormArr.length==0){
				console.log(this.FormArr.concat(this.keywords))
				this.FormArr = this.FormArr.concat(this.keywords)
			}else{
				console.log(this.keylist)
				this.FormArr=this.FormArr.concat(this.keylist)
			}
				console.log(this.FormArr)
			// return
				let params = {
					fieldId: this.fieldId,
					fieldParentId: this.fieldParentId,
					introduction: this.introduction,
					keywords: this.selectList.join(','),
					patentId: 0,
					patentName: this.name,
					patentNumber: this.patentNumber,
					picture: this.imgUrlarr.join(','),
					transferPrice: this.price,
					video: this.video
				};
				let param = {
					fieldId: this.fieldId,
					introduce: this.introduction,
					keywords: this.selectList.join(','),
					id: this.id,
					name: this.name,
					picture: this.imgUrlarr.join(','),
					price: this.price,
					video: this.video
				};
				this.$http.post(this.type == 1 ? '/patent/releasePatent' : '/demand/updateDemand', this.type == 1 ? params : param)
					.then(res => {
						if (res.code == '0') {
							uni.showToast({
								icon: "success",
								title: res.msg,
								
							})
							if(this.type == 2){
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/order/myneed'
									})
								}, 1500)
							}else if(this.type ==1){
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/status/wait?type=zl'
									})
								}, 1500)
							}
							

						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		padding-top: 16upx;
		background-color: #fff;
	}

	.content {
		background-color: #fff;
		padding-bottom: 72upx;

		.rows {
			margin: 0 30upx;
			display: block;
			background: #fff;

			>textarea {
				border: 1upx solid rgba(230, 230, 230, 1);
				border-radius: 8upx;
				width: 650upx;
				height: 180upx;
				overflow-y: auto;
				padding: 20upx;
				text-indent: 20upx;
				margin-bottom: 100upx;
			}

			.tit {
				flex-shrink: 0;
				width: 300upx;
				font-size: 30upx;
				line-height: 150upx;

				>text {
					color: #ff1a1a;
					font-size: 40upx;
				}
			}
		}

		.time {
			picker {
				width: 200upx;
				text-align: center;
			}
		}

		.row {
			display: flex;
			align-items: center;
			position: relative;
			margin: 0 30upx;
			min-height: 110upx;
			line-height: 110upx;
			background: #fff;
			border-bottom: 1upx solid rgba(238, 238, 238, 1);

			.arrow {
				width: 14upx;
				height: 24upx;
			}

			.close {
				width: 32upx;
				height: 32upx;
			}

			.addTag {
				width: 44upx;
				height: 44upx;
			}

			.tit {
				flex-shrink: 0;
				width: 230upx;
				font-size: 30upx;

				>text {
					color: #ff1a1a;
					font-size: 40upx;
				}
			}

			.imagebox {
				width: 390upx;
				.videolink{
					width: 100%;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap
				}

				.imageup {
					position: relative;
					width: 60upx;
					height: 60upx;
					display: inline-block;
					margin-right: 10upx;

					image {
						width: 60upx;
						height: 60upx;
						vertical-align: middle;
					
					}

					text {
						position: absolute;
						right: -10rpx;
						// display: none;
						top: 16rpx;
						width: 20rpx;
						height: 20rpx;
						font-size: 20rpx;
						text-align: center;
						color: white;
						cursor: pointer;
						line-height: 20rpx;
						border-radius: 100%;
						transform: rotate(45deg);
						background: rgba(0, 0, 0, 0.5);
					}
				}



				.video {
					width: 290upx;
					height: 160upx;
				}
			}


			.code {
				width: 104upx;
				height: 50upx;
				background: rgba(255, 255, 255, 1);
				border: 1upx solid rgba(253, 88, 10, 1);
				border-radius: 8upx;
				font-size: 24upx;
				color: rgba(253, 88, 10, 1);
				text-align: center;
				line-height: 50upx;
			}

			.input {
				flex: 1;
				font-size: 30upx;
			}

			.icon-shouhuodizhi {
				font-size: 36upx;
			}
		}
	}

	.add-btn {
		width: 600upx;
		height: 88upx;
		background: rgba(255, 117, 23, 1);
		border-radius: 8upx;
		font-size: 34upx;
		color: #fff;
		text-align: center;
		line-height: 88upx;
	}
	.taglist{
		width: 70%;
		// display: flex;
		// height: 60upx;
		// line-height: 60upx;
		// margin-top: 20upx;
		// border-bottom: 0.5px solid #eeeeee;
	}
	// 标签
	.tagItemSelectContent{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		height: auto;
		width: auto;
		min-height: 30px;
		overflow-y: scroll;
		// border: 1px solid #F2F2F2;
		padding: 0upx 20upx 10upx 10upx;
		margin:0 10upx;
	}
	.tagItemSelect{
		display: flex;
		align-items: center;
		padding: 0 10upx 0 10upx;
		position: relative;
		font-size: 28upx;
		margin:10upx;
		height: 30px;
		border:1upx solid #fd580a;
		color: #fd580a;
		border-radius: 10upx;
	}
	.select_delete{
		width: 15px;
		height: 15px;
		position: absolute;
		top: -12upx;
		right:-24upx;
	}
	.newTagContent{
		display: flex;
		justify-content: flex-start;
		margin: 20upx;
	}
	.newTagName{
		display: flex;
		align-items: center;
		width: 85%;
		
	}
	.newTagInput{
		border:1upx solid #eeeeee;
		font-size: 16px;
		width: 100%;
		height: 32px;
		border-radius: 10upx;
		padding: 5upx 10upx;
	}
	.newTagClick{
		display: flex;
		align-items: center;
		margin-left: 10upx;
	}
	.newTagClickBtn{
		height: 35px;
		line-height: 35px;
	}
	.tagContainer{
		margin: 10upx;
		font-size: 18px;
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #F2F2F2;
		position: relative;
	}
	.tagItem{
		padding: 0px 10px 0px 10px;
		margin: 10upx;
		display: flex;
		align-items: center;
		height: 40px;
		background-color: #FF9900;
		color: #FFFFFF;
		border-radius: 5px;
	}
	.tag_delete{
		width: 13px;
		height: 13px;
		margin-left:10upx;
	}
	.cancelDel{
		position: absolute;
		bottom: 0;
		right: 5px;
	}
</style>
